<template>
  <el-dropdown  :show-timeout="0" placement="bottom" trigger="click">
   <span class="el-dropdown-link">
      <img src="@/assets/images/avatar.png" :alt="userInfo.userName">{{ userInfo.userName }}
    </span>
   
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item >修改密码</el-dropdown-item>
      <el-dropdown-item divided @click.native="logout">
        <span>退出登录</span>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  methods:{
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  },
  computed:{
    userInfo(){
      return this.$store.state.user.userInfo
    }
  }
}
</script>

<style lang='scss' scoped>
  .el-dropdown-link {
    > img {
      width: 36px;
      height: auto;
      margin-right: 5px;
      border-radius: 100%;
      vertical-align: middle;
    }
  }
</style>